#lab {
  .lab-title {
    margin: 24px 0 24px;

    h2 {
      text-align: center;
      vertical-align: center;
      color: @font-color-grey65;
    }
  }

  .lab-content {
    max-width: 1068px;
    margin: auto;

    .lab-content-section {
      padding: 0 20px;
      margin: 0 0 48px;

      .content-section-title {
        color: @font-color-grey45;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;

        span[data-reget] {
          margin-left: 12px;
          font-size: 14px;
          color: @font-color-blue;
          cursor: pointer;
        }

        span[data-lab-title] {
          font-size: 16px;
        }

        span[data-lab-content] {
          display: flex;

          > div {
            display: flex;
            align-items: center;

            &:not(:last-child) {
              margin-right: 24px;
            }

            > span {
              display: flex;
              justify-content: center;
              border-radius: 4px;
              overflow: hidden;
              position: relative;

              input[name="search-idx"] {
                width: 100px;
                background: rgba(249, 250, 252, 1);
                padding: 2px 8px;
                border-radius: 4px;
                border: none;
                outline: none;
              }

              button[data-echart-idx] {
                margin-left: 12px;
                border-radius: 4px;
                padding: 4px 6px;
                cursor: pointer;
                background: #007AFF;
                color: #FFF;
              }

              &[data-input]:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 4px;
                background: #007AFF;
                z-index: 2;
              }
            }
          }
        }
      }

      @media @max768 {
        & {
          padding: 0 16px;

          .content-section-title {
            text-align: center;
            display: block;

            span[data-lab-content] {
              margin-top: 8px;
              display: block;

              > div {
                margin-bottom: 12px;
              }
            }
          }
        }
      }

      .content-section-panel {
        width: 100%;
        padding: 20px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.1), -1px -2px 8px #ffffff;
        border-radius: 12px;
        display: flex;
        justify-content: space-between;
      }
    }

    .lab-user-info {
      .content-section-panel {
        .info-panel-left {
          flex: 4;

          > div {
            display: flex;
            margin-bottom: 4px;

            &:not(:last-child) {
              margin-bottom: 8px;
            }

            span[data-title] {
              white-space: nowrap;
              color: @font-color-grey45;
            }

            span[data-content] {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              > span img {
                transform: translate(0, -.5px);
              }
            }
          }
        }

        .info-panel-right {
          flex: 6;
          max-width: 60%;
          padding-left: 20px;

          #map {
            height: 100%;
            width: 100%;
            opacity: 1;
            border-radius: 8px;
          }
        }

        @media @max768 {
          & {
            display: block;
            box-shadow: none;
            padding: 16px;
            background: rgba(249, 250, 252);
            border-radius: 12px;

            .info-panel-left {
              flex: 1;
            }

            .info-panel-right {
              flex: 1;
              height: 50vh;
              max-width: 100%;
              padding: 12px 0 0;
            }
          }
        }
      }
    }
  }
}
